<template>
  <a-card style="height: 100%">
    <div style="display: flex; justify-content: end">
      <a-button type="primary" @click="open = true">
        <template #icon>
          <UploadOutlined />
        </template>
        添加
      </a-button>
    </div>
    <MyTable :columns="columns" useNumber :tableData="tableData" />
  </a-card>
  <a-drawer
    v-model:visible="open"
    title="添加内容"
    width="80%"
    placement="right"
  >
    <template #extra>
      <a-space>
        <a-button type="primary" @click="submit">提交</a-button>
      </a-space>
    </template>
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ style: { width: '100px' } }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="名称"
        name="name"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="类型"
            name="disclosureType"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            label="编号"
            name="disclosureType"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            label="排序"
            name="sort"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="上传用户"
            name="uploadUser"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            label="上传时间"
            name="uploadTime"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
        <a-col :span="8">
          <a-form-item
            label="是否可见"
            name="isShow"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input v-model:value="formState.username" /> </a-form-item
        ></a-col>
      </a-row>
      <a-form-item
        label="封面图片"
        name="isShow"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>
      <a-form-item
        label="内容"
        name="isShow"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <MyEditor :height="300" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import MyTable from "@/components/CommonDai/Table.vue";
import { h, ref, reactive } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import MyEditor from "@/view/common/wangEditor.vue";
const props = defineProps<{
  fileType: string;
}>();

const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const submit = () => {};

/** 上传文件的功能 */
const open = ref(false);

/** 文件列表表格展示 */
const tableData = ref([
  {
    fileID: "A01",
    name: "我上传的文件",
    disclosureType: props.fileType,
  },
]);
const columns = [
  {
    title: "编号",
    dataIndex: "fileID",
    isShow: true,
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(
        "a",
        {
          onClick: () => {},
        },
        text
      );
    },
  },
  {
    title: "类型",
    dataIndex: "disclosureType",
    isShow: true,
    align: "center",
  },
];
</script>

<style scoped></style>
